<template>
  <div class="p-4">
    <!-- 统计卡片部分 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6 intro-y">
      <!-- 一级分类卡片 -->
      <div class="transform transition-all duration-300 hover:scale-105">
        <div class="bg-white rounded-xl shadow-lg p-6 relative overflow-hidden">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm font-medium">一级分类</p>
              <p class="text-2xl font-bold mt-2">{{ mainCount }}</p>
            </div>
            <div class="bg-blue-50 rounded-lg p-3">
              <font-awesome-icon class="icon-stats text-blue-500" :icon="['fas', 'code-branch']" />
            </div>
          </div>
          <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 to-blue-300"></div>
        </div>
      </div>

      <!-- 二级分类卡片 -->
      <div class="transform transition-all duration-300 hover:scale-105">
        <div class="bg-white rounded-xl shadow-lg p-6 relative overflow-hidden">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm font-medium">二级分类</p>
              <p class="text-2xl font-bold mt-2">{{ subCount }}</p>
            </div>
            <div class="bg-cyan-50 rounded-lg p-3">
              <font-awesome-icon class="icon-stats text-cyan-500" :icon="['fas', 'code-merge']" />
            </div>
          </div>
          <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-cyan-500 to-cyan-300"></div>
        </div>
      </div>

      <!-- 三级分类卡片 -->
      <div class="transform transition-all duration-300 hover:scale-105">
        <div class="bg-white rounded-xl shadow-lg p-6 relative overflow-hidden">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm font-medium">三级分类</p>
              <p class="text-2xl font-bold mt-2">{{ cate3Count }}</p>
            </div>
            <div class="bg-green-50 rounded-lg p-3">
              <font-awesome-icon class="icon-stats text-green-500" :icon="['fas', 'code-commit']" />
            </div>
          </div>
          <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-green-500 to-green-300"></div>
        </div>
      </div>

      <!-- 四级分类卡片 -->
      <div class="transform transition-all duration-300 hover:scale-105">
        <div class="bg-white rounded-xl shadow-lg p-6 relative overflow-hidden">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm font-medium">四级分类</p>
              <p class="text-2xl font-bold mt-2">{{ detailCount }}</p>
            </div>
            <div class="bg-teal-50 rounded-lg p-3">
              <font-awesome-icon class="icon-stats text-teal-500" :icon="['fas', 'code-commit']" />
            </div>
          </div>
          <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-teal-500 to-teal-300"></div>
        </div>
      </div>

      <!-- 申报企业卡片 -->
      <div class="transform transition-all duration-300 hover:scale-105">
        <div class="bg-white rounded-xl shadow-lg p-6 relative overflow-hidden">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm font-medium">申报企业</p>
              <p class="text-2xl font-bold mt-2">{{ companyCount }}</p>
            </div>
            <div class="bg-orange-50 rounded-lg p-3">
              <font-awesome-icon class="icon-stats text-orange-500" :icon="['fas', 'building']" />
            </div>
          </div>
          <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-orange-500 to-orange-300"></div>
        </div>
      </div>

      <!-- 申报产品卡片 -->
      <div class="transform transition-all duration-300 hover:scale-105">
        <div class="bg-white rounded-xl shadow-lg p-6 relative overflow-hidden">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm font-medium">申报产品</p>
              <p class="text-2xl font-bold mt-2">{{ productCount }}</p>
            </div>
            <div class="bg-purple-50 rounded-lg p-3">
              <font-awesome-icon class="icon-stats text-purple-500" :icon="['fas', 'box']" />
            </div>
          </div>
          <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-purple-500 to-purple-300"></div>
        </div>
      </div>
    </div>

    <!-- 图表部分 -->
    <div class="mt-8 grid grid-cols-1 gap-6">
      <!-- 省份企业统计 -->
      <div class="bg-white rounded-xl shadow-lg p-6 intro-y">
        <h3 class="text-lg font-semibold text-gray-700 mb-6 text-center">各省企业数统计</h3>
        <chart2 :tableData="tableData1" />
      </div>

      <!-- 产品申报趋势 -->
      <div class="bg-white rounded-xl shadow-lg p-6 intro-y">
        <h3 class="text-lg font-semibold text-gray-700 mb-6 text-center">产品申报趋势</h3>
        <chart1 :tableData="tableData2" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import chart1 from "./chart1.vue"
import chart2 from "./chart2.vue"
import * as $api from "@/api/api.js";
import { GetMainCount } from "@/api/api.js";

const tableData1 = ref([]);
const tableData2 = ref([]);
const mainCount = ref("");
const subCount = ref("");
const detailCount = ref("");
const companyCount = ref("");
const productCount = ref("");
const cate3Count = ref("");

onMounted(
  () => {
    getCompanyCount();
    getStatProduct();
    getMainCount();
    getSubCount();
    getDetailCount();
    getCCount();
    getProductCount();
    getCate3Count();
  }
)

const getCompanyCount = () => {
  $api.StatRegionCompany().then(res => {
    tableData1.value = res;
  });
}
const getStatProduct = () => {
  $api.StatProduct().then(res => {
    tableData2.value = res;
  })
}
const getMainCount = () => {
  $api.GetCate1Count().then(res => {
    mainCount.value = res;
  })
}
const getSubCount = () => {
  $api.GetCate2Count().then(res => {
    subCount.value = res;
  })
}

const getCate3Count = () => {
  $api.GetCate3Count().then(res => {
    cate3Count.value = res;
  })
}

const getDetailCount = () => {
  $api.GetCate4Count().then(res => {
    detailCount.value = res;
  })
}
const getCCount = () => {
  $api.GetCompanyCount().then(res => {
    companyCount.value = res
  })
}
const getProductCount = () => {
  $api.GetProductCount().then(res => {
    productCount.value = res
  })
}
</script>

<style scoped>
.card {
  @apply relative overflow-hidden;
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.bg-gradient-icon {
  @apply bg-gradient-to-br from-blue-500 to-blue-600;
}

.icon-stats {
  font-size: 24px;
  width: 24px;
  height: 24px;
}
</style>